<template>
  <div class="table-contaniner">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="船舶名称" class="smart-query-form-item">
          <a-input v-model:value="queryForm.vesselName" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item label="通行方向" class="smart-query-form-item">
          <a-select ref="select" v-model:value="queryForm.direction" style="width: 175px" placeholder="请选择通行方向" allowClear>
            <a-select-option value="true">上行</a-select-option>
            <a-select-option value="false">下行</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="通行时间" class="smart-query-form-item">
          <a-range-picker v-model:value="queryForm.times" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="queryData">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
          <a-button @click="showChart" class="smart-margin-left11">
            <template #icon>
              <AreaChartOutlined />
            </template>
            图表
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>

    <div class="page-table">
      <a-table
        class="crud-table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: '100%', y: 'calc(100vh - 250px)' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'vesselName'">
            {{ record.vesselName || '未知船名' }}
          </template>
          <template v-if="column.dataIndex === 'direction'">
            {{ record.direction ? '上行' : '下行' }}
          </template>
          <template v-if="column.dataIndex === 'bridgeId'">
            {{ getDictLabel(record.bridgeId, bridgeList, { label: 'bridgeName', value: 'bridgeId' }) }}
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="primary" size="small" class="operat-button" @click="handleDetail(record)">详情</a-button>
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.size"
          v-model:current="queryForm.current"
          v-model:pageSize="queryForm.size"
          :total="total"
          @change="onload"
          @showSizeChange="onload"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { api } from '/@/api/plat/vessel-traffic.js';
  import { api as bridgeApi } from '/@/api/plat/bridge.js';
  import { getDictLabel } from '/@/utils/methods';
  import { dateFormat } from '/@/utils/date';

  const emit = defineEmits(['change']);

  const show = ref(false);
  const queryFormState = {
    current: 1,
    size: 10,
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });
  const columns = [
    {
      title: '船舶名称',
      dataIndex: 'vesselName',
    },
    {
      title: 'MMSI',
      dataIndex: 'mmsi',
    },
    {
      title: '通行大桥',
      dataIndex: 'bridgeId',
    },
    {
      title: '通行方向',
      dataIndex: 'direction',
      align: 'center',
    },
    {
      title: '通行速度(m/s)',
      dataIndex: 'speed',
      align: 'center',
    },
    {
      title: '通行角度(°)',
      dataIndex: 'course',
      align: 'center',
    },
    {
      title: '通行时间',
      dataIndex: 'dataTime',
    },
  ];
  const tableData = ref([]);
  let loading = ref(false);
  const bridgeList = ref([]);

  async function open() {
    loading.value = true;
    show.value = true;
    await getBridgeList();
    queryData();
  }

  function queryData() {
    queryForm.value.current = 1;
    if (queryForm.value.times && queryForm.value.times.length > 0) {
      queryForm.value.startTime = dateFormat(new Date(queryForm.value.times[0]), 'yyyy-MM-dd 00:00:00');
      queryForm.value.endTime = dateFormat(new Date(queryForm.value.times[1]), 'yyyy-MM-dd 23:59:59');
    }
    onload();
  }

  function onload() {
    loading.value = true;
    api.queryPage(queryForm.value).then(({ data }) => {
      tableData.value = data.records;
      total.value = data.total;
      loading.value = false;
    });
  }

  function showChart() {
    emit('change', 'ChartsCard');
  }

  function getBridgeList() {
    return new Promise((r) => {
      bridgeApi.queryList().then(({ data }) => {
        bridgeList.value = data;
        r(data);
      });
    });
  }

  function resetQuery() {
    queryForm.value = { ...queryFormState };
    queryData();
  }

  function close() {
    queryForm.value = { ...queryFormState };
    show.value = false;
  }

  function handleDetail(row) {}

  onMounted(() => {
    open();
  });
</script>

<style lang="less" scoped>
  .table-contaniner {
    width: 100%;
    height: 100%;
  }
  .smart-query-form {
    background-color: transparent;
    &:deep .ant-form-row {
      .ant-form-item-label {
        label {
          color: #fff;
        }
      }
      input::placeholder {
        font-size: 14px;
      }
    }
  }
  .smart-margin-left11 {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
    margin-left: 10px;
    &:hover {
      background-color: #ebb563;
      color: #fff;
      border-color: #e6a23c;
    }
  }
  @import '/@/assets/style/table1.less';
</style>
